<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医生工作台</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div class="line"></div>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">挂号预约</el-menu-item>
        <el-menu-item index="2" @click="switchTab(2)">我的排班</el-menu-item>
        <el-menu-item index="3" @click="switchTab(3)">个人中心</el-menu-item>
    </el-menu>

    <!-- 添加挂号信息展示的部分 -->
    <div v-show="activeIndex === '1'">
        <h2>挂号信息</h2>
        <el-table :data="registrationList" style="width: 100%">
            <el-table-column prop="reId" label="挂号ID"></el-table-column>
            <el-table-column prop="userName" label="患者姓名"></el-table-column>
            <el-table-column prop="reAge" label="患者年龄"></el-table-column>
            <el-table-column prop="reSex" label="患者性别"></el-table-column>
            <el-table-column prop="deptName" label="科室名称"></el-table-column>
            <el-table-column prop="doctorName" label="医生姓名"></el-table-column>
            <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
            <el-table-column prop="reStatus" label="挂号状态"></el-table-column>
        </el-table>
    </div>

    <!-- 我的排班页面 -->
    <div v-show="activeIndex === '2'">
        <h2>我的排班</h2>
        <el-table :data="doctorSchedule" style="width: 100%">
            <el-table-column prop="schedule_id" label="排班ID"></el-table-column>
            <el-table-column prop="doctor_name" label="医生姓名"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="time_slot" label="时间段"></el-table-column>
            <el-table-column prop="re_status" label="排班状态"></el-table-column>
        </el-table>
    </div>

    <div v-show="activeIndex === '3'">
        <h2>个人中心</h2>
        <div class="personal-info">
            <!-- 个人信息 -->
            <el-form ref="personalForm" :model="personalInfo" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="personalInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model.number="personalInfo.age"></el-input>
                </el-form-item>
                <!-- 其他个人信息字段 -->
                <el-form-item>
                    <el-button type="primary" @click="updatePersonalInfo">保存</el-button>
                    <el-button @click="resetPersonalInfo">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="qualifications">
            <!-- 专业资质 -->
            <h3>专业资质</h3>
            <el-table :data="qualifications" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="title" label="资质名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="deleteQualification(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="addQualification">添加资质</el-button>
        </div>

        <div class="work-experience">
            <!-- 工作经历 -->
            <h3>工作经历</h3>
            <el-table :data="workExperiences" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="company" label="公司"></el-table-column>
                <el-table-column prop="position" label="职位"></el-table-column>
                <el-table-column prop="duration" label="工作年限"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="deleteWorkExperience(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="addWorkExperience">添加经历</el-button>
        </div>

        <div class="patient-reviews">
            <!-- 患者评价 -->
            <h3>患者评价</h3>
            <el-table :data="patientReviews" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="comment" label="评论"></el-table-column>
                <el-table-column prop="rating" label="评分"></el-table-column>
            </el-table>
        </div>
    </div>
</div>

<!-- 引入 Vue.js -->
<script src="../../js/vue.js"></script>
<!-- 引入 Element UI 的脚本 -->
<script src="../../element-ui/lib/index.js"></script>
<!-- 引入 Axios -->
<script src="../../js/axios-0.18.0.js"></script>
<script type="module" src="../../js/DoctorWorkAppointment.mjs"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                registrationList: [],
                doctorSchedule: [],// 存放挂号信息的数组
                personalInfo: {}, // 个人信息
                qualifications: [], // 专业资质
                workExperiences: [], // 工作经历
                patientReviews: []  //患者评价
            };
        },
        mounted() {
            // 页面加载时获取医生的挂号信息
            this.getRegistrationList();
        },
        methods: {
            handleSelect(key, keyPath) {
                this.activeIndex = key;
            },
            // 切换标签时获取挂号信息
            switchTab(index) {
                this.activeIndex = index.toString();
                if (index === '1') {
                    this.getRegistrationList();
                } else if (index === '2') {
                    this.getDoctorSchedule();
                }
            },
            getRegistrationList() {
                debugger
                // 发送请求获取医生的挂号信息
                axios.get('http://localhost:8180/registration/findAll')
                    .then(response => {
                        console.log(response)
                        console.log(response.data())
                        this.registrationList = response.data;
                    })
                    .catch(error => {
                        console.error('获取挂号信息失败', error);
                    });
            },
            getDoctorSchedule() {
                // 发送请求获取医生的排班信息
                axios.get('/api/doctor/schedule')
                    .then(response => {
                        this.doctorSchedule = response.data;
                    })
                    .catch(error => {
                        console.error('获取医生排班信息失败', error);
                    });
            },
            addQualification() { /* ... */
            }, // 添加专业资质
            deleteQualification(index) { /* ... */
            }, // 删除专业资质
            updatePersonalInfo() { /* ... */
            }, // 更新个人信息
            resetPersonalInfo() { /* ... */
            }, // 重置个人信息
            addWorkExperience() { /* ... */
            }, // 添加工作经历
            deleteWorkExperience(index) { /* ... */
            }, // 删除工作经历

        }
    });
</script>
</body>
</html>
